<template>
  <div>
    <div class="box">
      <div class="tit">业务范围</div>
      <div class="boxs">
        <div
          class="box-item"
          v-for="item in YWFW"
          :key="item.code"
          :class="checkedList.includes(item.code) ? 'checkedStyle' : ''"
          :style="{ cursor: isPreview ? 'default' : 'pointer' }"
          @click="choose(item.code)"
        >
          <img
            :src="'data:image/png;base64,' + item.imageBase64"
            class="item-img"
          />
          <div class="item-name">{{ item.name }} <i v-if="checkedList.includes(item.code) " class="el-icon-check"></i> </div>
        </div>
      </div>
    </div>
    <el-row style="text-align: center">
      <el-col>
        <el-button
          v-loading="loading"
          class="dialogBtn"
          type="primary"
          @click="next"
          v-if="!isPreview"
          >下一步</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getBusinessApi,
  getBusinessFileApi,
  saveCustomerFile2Api
  //  saveCustomerFile2Api
} from '@/api/customerFile'
export default {
  name: 'BusinessScope',
  props: ['id', 'isEdit', 'isPreview', 'companyData'],
  data () {
    return {
      checkedList: [],
      YWFW: [],
      loading: false
    }
  },
  created () {
    this.getBusiness()
    if (this.isPreview) {
      this.getInfoData()
    }
  },
  methods: {
    async getInfoData () {
      // 获取当前客户业务范围
      const res = await getBusinessApi()
      console.log(res.data.list)
      console.log(this.companyData.businessScope)
      this.checkedList = this.companyData.businessScope?.split(',') || []
      // this.checkedList = res.data.list
      console.log(this.checkedList)
      // console.log(this.YWFW)
    },
    choose (item) {
      if (this.isPreview) return
      if (this.checkedList.includes(item)) {
        this.checkedList = this.checkedList.filter((value) => value !== item)
      } else {
        this.checkedList.push(item)
      }
    },
    // 筛选当前业务范围
    async getBusiness () {
      const res1 = await getBusinessFileApi()
      const a = res1.data.list
      console.log('总业务', a)
      const res2 = await getBusinessApi()
      const b = res2.data.list
      console.log('现业务', b)
      this.YWFW = a.filter(item => b.some(r => item.code.includes(r.bizCode)))
      console.log(this.YWFW)
    },
    async next () {
      if (!this.checkedList.join(',')) return this.$message('请选择业务范围')
      this.loading = true
      try {
        const res = await saveCustomerFile2Api({
          businessScope: this.checkedList.join(','),
          id: this.id
        })
        console.log(res)
        if (res.code == 200) {
          this.$emit('next', 3)
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  margin-left: 10px;
  .tit {
    width: 70px;
    height: 100%;
    margin-right: 25px;
  }
  .boxs {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
    height: 100%;
    .box-item {
      margin-right: 35px;
      margin-bottom: 20px;
      border: 1px solid #fff;
      cursor: pointer;
      .item-img {
        width: 180px;
        height: 100px;
      }
      .item-name{
        position: relative;
        .el-icon-check{
          position: absolute;
          color: #81b337;
          font-size: 20px;
          right: 15px;
          bottom: 0px;
        }
      }
    }
  }
}
.checkedStyle {
  border: 1px solid skyblue !important;
}
</style>
